<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="css/account.css" />
	</head>

	<body>
		
		<div class="container">
			<div class="account">
				<div class="acc_l">
					<img src="image/logo_top.png"/>
					<p>道恩账号</p>
				</div>
				<div class="acc_r"> 
					<a>退出</a>
				</div>
			</div>
			<div class="geren">
				<div class="feng">
					<div class="xinxi">
						<p style="text-align: right;line-height: 30px;">峰时期</p>
						<p>107807079</p>
					</div>
					<img src="image/head.png"/>
				</div>
				<div class="lists">
					<ul>
						<li class="on">账号安全</li>
						<li>个人信息</li>
						<li>绑定授权</li>
						<li>道恩服务</li>
					</ul>
				</div>
				<div class="z1" style="display: block;">
					<div class="anquan">
						<div class="fenshu">
							<p>安全等级<span>100</span>分</p>
							<img src="image/jindutiao.png"/>
							<h6>太棒了，风险已降至最低</h6>
						</div>
						<div class="list">
							<img src="image/mima.png"/>
							<div class="main">
								<h5>账号密码</h5>
								<p>用于保护帐号信息和登录安全</p>
							</div>
							<div class="xiugai">
								修改
							</div>
						</div>
						<div class="list">
							<img src="image/mima.png"/>
							<div class="main">
								<h5>账号密码</h5>
								<p>用于保护帐号信息和登录安全</p>
							</div>
							<div class="xiugai">
								修改
							</div>
						</div>
						<div class="list">
							<img src="image/mima.png"/>
							<div class="main">
								<h5>账号密码</h5>
								<p>用于保护帐号信息和登录安全</p>
							</div>
							<div class="xiugai">
								修改
							</div>
						</div>
						<div class="list">
							<img src="image/mima.png"/>
							<div class="main">
								<h5>账号密码</h5>
								<p>用于保护帐号信息和登录安全</p>
							</div>
							<div class="xiugai">
								修改
							</div>
						</div>
					</div>
					<div class="tuijian">
						<p>推荐使用</p>
						<div class="line"></div>
						<div class="bott">
							<img src="image/dunpai.png"/>
							<div class="bott_p">
								<p>道恩安全令牌</p>
								<p>在非信任设备上登录需要二次验证，防止他人恶意登录</p>
							</div>
							<div class="xiugai">
								修改
							</div>
						</div>
					</div>
					<p>简体  |  繁体   |  English   |   常见问题</p>
					<p>道恩公司版权所有-京ICP备14523611-京公网安备1431356543121号-京ICP证4324342312号</p>
				</div>
				<div class="z1" style="display: none;">
					<div class="grxx">
						<div class="left">
							<img src="image/head.png"/>
							<p>修改头像</p>
						</div>
						<div class="right">
							<div class="jc">
								<p>基础资料</p>
								<div class="right_r">
									<img src="image/pencile.png"/>
									<p>编辑</p>
								</div>
							</div>
							<p>姓名：风起时</p>
							<p>生日：96-6-16</p>
							<p>性别：女</p>
							<div class="jc">
								<p>高级资料</p>
								<div class="right_r">
									<img src="image/pencile.png"/>
									<p>编辑</p>
								</div>
							</div>
							<p>账号地区：中国</p>
						</div>
					</div>
					<p>简体  |  繁体   |  English   |   常见问题</p>
					<p>道恩公司版权所有-京ICP备14523611-京公网安备1431356543121号-京ICP证4324342312号</p>
				</div>
				<div class="z1" style="display: none;">
					789
				</div>
				<div class="z1" style="display: none;">
					xyz
				</div>
			</div>
		</div>
		
	</body>
	<script type="text/javascript">
		var lis=document.getElementsByTagName("li");
		console.log(lis)
		var z1s=document.getElementsByClassName("z1");
		console.log(z1s)
		for(var i=0;i<lis.length;i++){
			lis[i].index=i;
			lis[i].onclick=function(){
				for(var i=0;i<lis.length;i++){
					lis[i].className='';
					z1s[i].style.display='none';
				}
				console.log(this.index);
				this.className='on';
				z1s[this.index].style.display='block';
			};
		}
	</script>
</html>